<template>
	<!-- pages/specialDiscount/specialDiscount.wxml -->
	<view class="discount-list-wrapper">
		<image src="/static/images/icon/activity-bg.png" class="list-bg"></image>
		<view :class="['item' , item.mobilePic ? '' : 'no-bg']" v-for="(item, index) in discountList"
			:key="item.discountId" @tap="toDiscountDetail" :data-discountid="item.discountId"
			v-if="endTimeList[index].flag">
			<image :src="item.mobilePic" class="bg"></image>
			<view class="text-box">
				<view class="info">{{item.discountName}}</view>
				<view class="shop">{{item.shopName}}{{i18n.specialty}}
					<image src="/static/images/icon/activity-arr.png" class="arr"></image>
				</view>
				<view class="time">
					<view class="time-icon"></view>{{i18n.onlyLeft}}
					<view class="much-time" v-if="endTimeList[index].day">
						<view class="day">{{endTimeList[index].day}}</view>{{i18n.day}}
					</view>
					<!-- 大于24小时展示 -->
					<view class="number-box" v-if="endTimeList[index].day==0">
						<view class="number">{{endTimeList[index].hour}}</view>
						<view class="colon">:</view>
						<view class="number">{{endTimeList[index].min}}</view>
						<view class="colon">:</view>
						<view class="number">{{endTimeList[index].second}}</view>
					</view>
					<!-- 小于24小时展示 -->
				</view>
			</view>
		</view>
		<view class="empty" v-if="discountList.length==0">
			<view class="empty-icon">
				<image src="/static/images/icon/empty.png"></image>
			</view>
			<view class="empty-text">{{i18n.noMoreActivities}}</view>
		</view>
		<!-- <pageBottomTips :isAll="loadAll" :empty="!discountList.length" /> -->
		<pageBottomTips :isAll="loadAll" :current='current>1?true:false' />
	</view>
</template>

<script>
	// pages/specialDiscount/specialDiscount.js
	var http = require("../../../utils/http.js");
	var util = require("../../../utils/util.js");
	import pageBottomTips from '../../components/pageBottomTips/pageBottomTips';

	export default {
		data() {
			return {
				discountList: [],
				//优惠活动列表
				current: 1,
				// 当前页数
				pages: 1,
				// 总页数
				endTimeList: [],
				//结束时间
				timer: '',
				loadAll: false, // 已加载全部
			};
		},

		components: {
			pageBottomTips
		},

		computed: {
			i18n() {
				return this.$t('index')
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getDiscountPage(1); //默认加载第一页
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			//头部导航标题
			uni.setNavigationBarTitle({
				title: this.i18n.limitedTimeOffer
			});
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			if (this.current < this.pages) {
				this.getDiscountPage(this.current + 1);
			} else {
				this.setData({
					loadAll: true
				})
			}
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			// 获取优惠活动列表
			getDiscountPage(cur) {
				uni.showLoading();
				var ths = this;
				http.request({
					url: "/marking/discount/getDiscountList",
					data: {
						current: cur,
						//当前页
						size: 20
					},
					method: "GET",
					callBack: res => {
						var list = [];
						if (res.current == 1) {
							list = res.records;
						} else {
							list = ths.discountList;
							Array.prototype.push.apply(list, res.records);
						}
						var endTimeList = [];
						list.forEach(item => {
							endTimeList.push({
								endTime: item.endTime
							});
						});
						this.setData({
							discountList: list,
							pages: res.pages,
							endTimeList: endTimeList,
							current: res.current,
							loadAll: res.pages == cur
						});
						this.countTime()
						uni.hideLoading()
					}
				});
			},

			// 倒计时
			countTime() {
				var endTimeList = this.endTimeList;
				endTimeList.forEach((item, index) => {
					// 获取当前时间
					let date = new Date();
					let now = date.getTime(); // 设置截止时间

					let end = util.dateToTimestamp(item.endTime); // 时间差

					let leftTime = end - now; // 定义变量 d,h,m,s保存倒计时的时间

					if (leftTime >= 0) {
						// 天
						item.day = Math.floor(leftTime / 1000 / 60 / 60 / 24); // 时

						let h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
						item.hour = h < 10 ? '0' + h : h; // 分

						let m = Math.floor(leftTime / 1000 / 60 % 60);
						item.min = m < 10 ? '0' + m : m; // 秒

						let s = Math.floor(leftTime / 1000 % 60);
						item.second = s < 10 ? '0' + s : s;
						item.flag = true
					} else {
						item.day = 0;
						item.hour = '00';
						item.min = '00';
						item.second = '00';
						item.flag = false
					}
				});
				this.setData({
					endTimeList: endTimeList
				}); // 递归每秒调用countTime方法，显示动态时间效果,

				this.setData({
					timer: setTimeout(this.countTime, 1000)
				});

				this.$forceUpdate();
			},

			//跳转活动详情
			toDiscountDetail(e) {
				util.tapLog(3)
				var discountId = e.currentTarget.dataset.discountid;
				uni.navigateTo({
					url: '../discountDetail/discountDetail?discountId=' + discountId
				});
			}

		}
	};
</script>
<style lang="scss">
	/* 限时特惠 */

	.discount-list-wrapper {
		padding: 10rpx 20rpx 20rpx;
		position: relative;

		.list-bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 250rpx;
		}

		.item {
			width: 100%;
			height: 260rpx;
			position: relative;
			margin-top: 26rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;

			&.no-bg {
				background: #999;
			}

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				border-radius: 10rpx;
				width: 100%;
				height: 100%;
			}

			.text-box {
				padding: 30rpx;
				position: relative;
				width: 100%;
				box-sizing: border-box;


				.info {
					font-size: 38rpx;
					color: #fff;
					font-weight: 600;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				.shop {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #fff;

					.arr {
						display: inline-block;
						width: 20rpx;
						height: 20rpx;
						margin-left: 10rpx;
					}
				}
			}

			.time {
				font-size: 24rpx;
				color: #fff;
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				.time-icon {
					width: 22rpx;
					height: 22rpx;
					border: 2rpx solid #fff;
					border-radius: 50%;
					position: relative;
					margin-right: 10rpx;

					&::before,
					&::after {
						position: absolute;
						display: block;
						content: " ";
						background: #fff;
					}

					&::before {
						width: 2rpx;
						height: 10rpx;
						top: 6rpx;
						left: 10rpx;
					}

					&::after {
						width: 6rpx;
						height: 2rpx;
						top: 14rpx;
						right: 6rpx;
					}
				}

				.much-time {
					display: flex;
					align-items: center;

					.day {
						color: #f6e59e;
						font-family: arial;
						margin: 0 6rpx;
					}
				}

				.number-box {
					display: flex;
					align-items: center;
					color: #fff;
					margin-left: 10rpx;

					.number {
						font-family: arial;
						padding: 2rpx 6rpx;
						text-align: center;
						background: rgba(0, 0, 0, .7);
						border-radius: 4rpx;
						font-size: 24rpx;
					}

					.colon {
						font-family: arial;
						margin: 0 6rpx;
					}
				}
			}
		}

		/* 已加载全部 */
		.loadall {
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #aaa;
			line-height: 2em;
		}

		/* 空 */
		.empty {
			font-size: 28rpx;
			color: #aaa;
			height: 2em;
			line-height: 2em;
			margin-top: 360rpx;
			text-align: center;


			.empty-icon {
				display: block;
				width: 40px;
				height: 40px;
				margin: 0 auto;
				margin-bottom: 10px;
			}

			.empty-icon image {
				width: 100%;
				height: 100%;
			}
		}
	}

	/* 限时特惠 end */
</style>
